<template>
	<!--  type="2d" -->
	<view class="compress"><canvas :style="{ width: imgData.canvasSize.width, height: imgData.canvasSize.height }"
			canvas-id="myCanvas"></canvas></view>
</template>

<script setup>
	import { reactive } from 'vue';
	let imgData = reactive({
		pic: '',
		canvasSize: {
			width: 0,
			height: 0
		}
	});
	// 压缩
	let compress = params => {
		return new Promise(async (resolve, reject) => {
			// 等待图片信息
			let info = await getImageInfo(params)
				.then(info => info)
				.catch(err => err);
			console.log(info)
			if (!info) {
				reject('获取图片信息异常');
				return;
			}

			// 设置最大 & 最小 尺寸
			const maxSize = params.maxSize || 1080;
			const minSize = params.minSize || 640;

			// 当前图片尺寸
			let { width, height } = info;

			// 非 H5 平台进行最小尺寸校验
			// #ifndef H5
			if (width <= minSize && height <= minSize) {
				resolve(params.src);
				return;
			}
			// #endif

			// 最大尺寸计算
			if (width > maxSize || height > maxSize) {
				if (width > height) {
					height = Math.floor(height / (width / maxSize));
					width = maxSize;
				} else {
					width = Math.floor(width / (height / maxSize));
					height = maxSize;
				}
			}

			// 设置画布尺寸
			imgData.width = `${width}rpx`
			imgData.height = `${height}rpx`

			// Vue.nextTick 回调在 App 有异常，则使用 setTimeout 等待DOM更新
			setTimeout(() => {
				console.log('八嘎', 1)
				let ctx = reactive(uni.createCanvasContext('myCanvas'))
				console.log(ctx, 'ctx')
				ctx.clearRect(0, 0, width, height);
				ctx.drawImage(info.path, 0, 0, uni.upx2px(width), uni.upx2px(height));
				ctx.draw(false, () => {
					uni.canvasToTempFilePath({
						x: 0,
						y: 0,
						width: uni.upx2px(width),
						height: uni.upx2px(height),
						destWidth: width,
						destHeight: height,
						canvasId: 'myCanvas',
						fileType: params.fileType || 'jpg',
						quality: params.quality || 0.1,
						success: res => {
							// 在H5平台下，tempFilePath 为 base64
							console.log('八嘎', res)
							resolve(res.tempFilePath);
						},
						fail: err => {
							reject(null);
						}
					});
				});
			}, 300);
		});
	};
	// 获取图片信息
	let getImageInfo = src => {
		return new Promise((resolve, reject) => {
			uni.getImageInfo({
				src,
				success: info => {
					resolve(info);
				},
				fail: () => {
					reject(null);
				}
			});
		});
	};
	// 批量压缩
	let batchCompress = params => {
		// index:进度，done:成功，fail:失败
		let [index, done, fail] = [0, 0, 0];
		// 压缩完成的路径集合
		let paths = [];
		// 批量压缩方法
		let batch = () => {
			return new Promise((resolve, reject) => {
				// 开始
				let start = async () => {
					params.progress &&
						params.progress({
							done,
							fail,
							count: params.batchSrc.length
						});
					// 等待图片压缩方法返回
					let path = await next();
					if (path) {
						done++;
						paths.push(path);
					} else {
						fail++;
					}

					index++;
					// 压缩完成
					if (index >= params.batchSrc.length) {
						resolve(true);
					} else {
						start();
					}
				};
				start();
			});
		};
		// 依次调用压缩方法
		let next = () => {
			return this.compress({
				src: params.batchSrc[index],
				maxSize: params.maxSize,
				fileType: params.fileType,
				quality: params.quality,
				minSize: params.minSize
			});
		};

		// 全部压缩完成后调用
		return new Promise(async (resolve, reject) => {
			// 批量压缩方法回调
			let res = await batch();
			if (res) {
				resolve(paths);
			} else {
				reject(null);
			}
		});
	};
	defineExpose({ compress })
</script>

<style lang="scss" scoped>
	.compress {
		position: fixed;
		width: 24rpx;
		height: 24rpx;
		overflow: hidden;
		top: -999999rpx;
		left: 0;
	}
</style>